<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="root">
			<div>
				今天的天气很 {{info}}
			</div>
			<div>
				<button @click="changeFlag">点一下</button>
			</div>
		</div>
		
		<script type="text/javascript">
			const vm = new Vue({
				el: "#root",
				data: {
					isHot: true
				},
				computed: {
					info: function() {
						return this.isHot? '炎热' : '凉爽' 
					}
				},
				methods: {
					changeFlag() {
						this.isHot = !this.isHot
					}
				},
				// 属性监听的第一种写法
				watch: {
					// 监视的配置对象
					// 可以监视普通属性还可以监视计算属性
					isHot: {
						// immediate为true表示页面刚渲染就运行 handler 函数
						immediate: true, 
						// handler接收两个参数，一个是这个状态参数改变前的值，另一个是改变后的旧值
						// 当监视的对象 isHot 发生改变就会调用该函数
						 handler(newValue, preValue){
							console.log('ishot 被修改了');
							console.log(`newValue: ${newValue}, preValue: ${preValue}`);
						}
					}
				}
			})
			// watch 的第二种写法
			vm.$watch('info', {
				// immediate为true表示页面刚渲染就运行 handler 函数
				immediate: true, 
				// handler接收两个参数，一个是这个状态参数改变前的值，另一个是改变后的旧值
				// 当监视的对象 info 发生改变就会调用该函数
				 handler(newValue, preValue){
					console.log('info 被修改了');
					console.log(`newValue: ${newValue}, preValue: ${preValue}`);
				}
			})
		</script>
	</body>
</html>